<template>
	<page-wraper :safeAreaInsetBottom="false">
		<wd-card custom-style="margin-top: 20px;">
			余额: <wd-text :text="`${userInfo.balance || 0} CNY`" size="16px" color="orange"
				bold />
		</wd-card>

		<view style="margin-top: 15px;">
			<wd-status-tip image="search" tip="当前搜索无结果" v-if="list.length == 0" />
			
			<wd-card :title="`${item.created} - ${statusMap[item.status]}`" v-for="(item, index) in list" :key="index">
				<view>
					<div><wd-text :text="`银行: ${item.bank_name}`" size="14px" /></div>
					<div><wd-text :text="`卡号: ${item.account_number}`" size="14px" /></div>
					<div><wd-text :text="`金额: ${item.charge} ${item.currency}`" size="14px" /></div>
					<div><wd-text :text="`备注: ${item.remark}`" size="14px" /></div>
				</view>
			</wd-card>
		</view>

		<wd-loadmore :state="state" @reload="load" />

		<wd-popup v-model="show" position="bottom" custom-style="padding: 10rpx;" @close="handleClose">
			<wd-text text="余额提现" size="22px" color="black"
				custom-style="display: block; padding-bottom: 10px; border-bottom: 1px solid #f6f6f6;" />

			<wd-form ref="form" :model="model">
				<wd-cell-group border>
					<wd-input label="开户行" label-width="100px" prop="bank_name" clearable v-model="model.bank_name"
						:rules="[{ required: true, message: '请填写开户行' }]" />
					<wd-input label="银行帐号" label-width="100px" prop="account_number" clearable
						v-model="model.account_number" :rules="[{ required: true, message: '请填写银行帐号' }]" />
					<wd-input label="户名" label-width="100px" prop="account_name" clearable v-model="model.account_name"
						:rules="[{ required: true, message: '请填写户名' }]" />
					<wd-input label="提现金额" label-width="100px" prop="value" clearable v-model="model.value"
						:rules="[{ required: true, message: '请填写开户行' }]" />
					<wd-input label="备注" label-width="100px" prop="remark" clearable v-model="model.remark"
						:rules="[{ required: true, message: '请填写开户行' }]" />
				</wd-cell-group>
				<view class="footer">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</wd-form>
		</wd-popup>
	</page-wraper>

	<wd-fab type="primary" position="left-bottom" :expandable="false" @click="withdraw"></wd-fab>
</template>

<script lang="ts" setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	const userInfo = ref<any>({});
	const state = ref<any>('loading')
	const list = ref<any>([]);
	const pageIndex = ref(1);
	const pageSize = 20;
	const show = ref(false);
	const model = ref<any>({});

	const statusMap = ref<any>({
		1: '待审核',
		2: '提现成功',
		3: '作废',
		4: '撤销',
		5: '提现成功'
	})

	onLoad(() => {
		uni.$http.get('/main/user_info').then(res => {
			userInfo.value = res.data.data;
		})
	})

	function handleClose() {
		show.value = false;
		load({ value: '' });
	}

	function withdraw() {
		show.value = true;
	}

	function load({ value }) {
		state.value = 'loading';

		uni.$http.get(`user/withdraw/list?page=${pageIndex.value}&limit=${pageSize}&sort=created&keywords=${value}`).then(res => {
			if (pageIndex.value == 1) {
				list.value = res.data.data || [];
			} else {
				list.value = list.value.concat(res.data.data || []);
			}

			if (list.value.length != pageSize) {
				state.value = 'finished';
			}
		})
	}

	function handleSubmit() {
		uni.showLoading({
			title: '请稍后...'
		});

		uni.$http.post(`/user/withdraw/create`, model.value)
			.then((res) => {
				if (res.status == 200 && res.data.code == 0) {
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})

					handleClose();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
			}).catch(e => {
				uni.showToast({
					title: e.message,
					icon: 'error'
				})
			}).finally(() => {
				uni.hideLoading();
			});
	}

	onLoad(() => {
		load({ value: '' });
	});

	onReachBottom(() => {
		pageIndex.value += 1;

		load({ value: '' });
	})
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}
</style>